/**
 *
 * by littlefean
 */

window.onload = function () {

    let canvas = document.querySelector(`canvas`);
    let ctx = canvas.getContext("2d");
    let LEN = 350; // canvas的边长
    let GRID_GRAY = 100;  // 灰色

    let a = Math.PI / 3; // 当前的角度
    let o = new Vector(LEN / 2, LEN / 2);  // 中心点

    // 速度设置
    let speed = 0.01;
    let minSpeed = 0;
    let maxSpeed = 0.05;
    let speedInput = document.querySelector(`.speedInput`);
    console.log(speedInput);
    speedInput.addEventListener("input", function () {
        speed = minSpeed + (+speedInput.value / 100) * (maxSpeed - minSpeed);
    });

    // 缩放设置
    let ONE_LEN = 100;   // 单位圆半径是多少像素
    let MIN_LEN = 5;
    let MAX_LEN = LEN / 2;
    let scaleInput = document.querySelector(`.scale`);
    scaleInput.addEventListener("input", () => {
        ONE_LEN = MIN_LEN + (+scaleInput.value / 100) * (MAX_LEN - MIN_LEN);

    });
    // 暂停设置
    let running = true;  // 动画是否正在播放
    let startBtn = document.querySelector(`.start`);
    startBtn.addEventListener("click", () => {
        running = !running;
        if (running) {
            startBtn.innerHTML = "动画暂停";
        } else {
            startBtn.innerHTML = "动画播放";
        }
    });

    // 添加说明
    let help = document.querySelector(`.help`);
    let sinColor = `rgb(255, 0, 0)`;
    let sinD = div(`表示sin(x)长度的线段颜色`, "note");
    sinD.style.color = sinColor;

    let cosColor = `rgb(0, 255, 0)`;
    let cosD = div(`表示cos(x)长度的线段颜色`, "note");
    cosD.style.color = cosColor;

    let tanColor = `rgb(0, 0, 255)`;
    let tanD = div(`表示tan(x)长度的线段颜色`, "note");
    tanD.style.color = tanColor;

    let secColor = `rgb(255, 255, 0)`;
    let secD = div(`表示sec(x)长度的线段颜色`, "note");
    secD.style.color = secColor;

    let cscColor = `rgb(255, 0, 255)`;
    let cscD = div(`表示csc(x)长度的线段颜色`, "note");
    cscD.style.color = cscColor;

    let cotColor = `rgb(0, 255, 255)`;
    let cotD = div(`表示cot(x)长度的线段颜色`, "note");
    cotD.style.color = cotColor;

    help.appendChild(sinD);
    help.appendChild(cosD);
    help.appendChild(tanD);
    help.appendChild(cotD);
    help.appendChild(secD);
    help.appendChild(cscD);

    setInterval(() => {
        if (running) {
            a += speed;
        }
        rend();
    }, 10);

    function rend() {
        drawBackground();
        drawBasic();
        drawLine();
    }

    function drawBackground() {
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, LEN, LEN);
    }

    function drawBasic() {
        let grayColor = `rgb(${GRID_GRAY}, ${GRID_GRAY}, ${GRID_GRAY})`;
        // 画坐标轴
        drawLineCtx(ctx, new Vector(0, LEN / 2), new Vector(LEN, LEN / 2),
            grayColor, 1);
        drawLineCtx(ctx, new Vector(LEN / 2, 0), new Vector(LEN / 2, LEN),
            grayColor, 1);
        // 画圆圈
        ctx.strokeStyle = "rgb(255,255,255)";
        ctx.beginPath();
        ctx.arc(LEN / 2, LEN / 2, ONE_LEN, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();
    }

    // 画线
    function drawLine() {

        let p1 = new Vector(o.x + Math.cos(a) * ONE_LEN, o.y - Math.sin(a) * ONE_LEN);
        let x1 = new Vector(o.x + Math.cos(a) * ONE_LEN, LEN / 2);

        let x2 = new Vector(o.x + (1 / Math.cos(a)) * ONE_LEN, LEN / 2);
        let y1 = new Vector(LEN / 2, o.y - (1 / Math.sin(a)) * ONE_LEN);

        drawLineCtx(ctx, o, p1, `rgb(255, 255, 255)`, 1);

        let boldWith = 4;
        // sin x
        drawLineCtx(ctx, o, x1, sinColor, boldWith);
        // cos x
        drawLineCtx(ctx, p1, x1, cosColor, boldWith);
        // tan x
        drawLineCtx(ctx, p1, x2, tanColor, boldWith);
        // sec x
        drawLineCtx(ctx, o, x2, secColor, 1);
        // csc x
        drawLineCtx(ctx, o, y1, cscColor, 1);
        // cot x
        drawLineCtx(ctx, p1, y1, cotColor, 1);

        // drawLineCtx(ctx, p1, x1, `rgb(255, 0, 255)`, 1);
        // drawLineCtx(ctx, y1, x2, `rgb(255, 0, 0)`, 1);
    }

    function drawLineCtx(ctx, p1, p2, colorStr, width = 1) {
        ctx.strokeStyle = colorStr;
        ctx.lineWidth = width.toString();
        ctx.beginPath();
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.stroke();
        ctx.closePath();
    }
}
